<template>
	<view class="wrapper">
		<u-loading-page loadingColor="#e3230e" iconSize="40" :loading="pageLoading"></u-loading-page>
		<view class="subject">
			<view class="subject-bg">
				<image class="subject-bg-img" src="/static/images/seckill_bg.jpg" mode="widthFix"></image>
			</view>
			<view class="subject-content">
				<view class="subject-content-product">
					<view class="product-seckill" v-for="(item, index) in seckillList" :key="index">
						<goods-item-seckill @chooseGoods="chooseGoods" :mode="1" :goods="item" :column="1"></goods-item-seckill>
					</view>
				</view>
			</view>
		</view>
		
		<!--商品弹窗-->
		<goods-popup
		@close="closeGoods"
		:showGoods="showGoods"
		:goods="goodsInfo"></goods-popup>
		
	</view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { spreadSubjectDetail, productSeckillList } from "@/api/app_api/index"
import { timestampNum } from '@/utils/ty.js'

	const userStore = useUserStore()
	const setStore = useSetStore()
	
	// 页面加载
	const pageLoading = ref(true)
	// 获取秒杀商品
	const seckillList = ref([])
	const getSeckillList = () => {
		if (!userStore.regionCode || !userStore.sellChannel) return false
		productSeckillList({
			regionCode: userStore.regionCode,
			sellChannel: userStore.sellChannel
		}).then(res => {
			seckillList.value = res?.data || []
			pageLoading.value = false
		})
	}
	
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	
	// 选择商品
	const showGoods = ref(false)
	const goodsInfo = ref({})
	const chooseGoods = (item) => {
		showGoods.value = true
		goodsInfo.value = {
			...item,
			name: item.productName,
			id: item.productId,
			moreSpec: 0,
			regionCode: item.regionCode,
			sellPrice: item.seckillPrice,
			image: item.sellImage
		}
	}
	const closeGoods = () => {
		showGoods.value = false
		goodsInfo.value = {}
	}
	
	// 监听
	watch(() => userStore.sellChannel, (newVal, oldVal) => {
		getSeckillList()
	})
	watch(() => userStore.regionCode, (newVal, oldVal) => {
		getSeckillList()
	})
	
	onPullDownRefresh(() => {
		getSeckillList()
		uni.stopPullDownRefresh()
	})
	
	onLoad((option) => {
		getSeckillList()
	})
	
</script>

<style lang="scss">
	.subject {
		min-height: 100vh;
		background-color: #fd170d;
		// background: linear-gradient(to right,
		// #ff2a00 0%,
		// #ff7200 256rpx,
		// #ff3000 257rpx ,
		// #ff3000 50%,
		// #ff3000 445rpx,
		// #ff7200 446rpx,
		// #ff2a00 100%);
		&-header {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 10;
			box-sizing: border-box;
			padding: 12rpx 0;
			// #ifdef MP-WEIXIN
			padding-top: 0;
			// #endif
		}
		&-title {
			font-size: 32rpx;
			font-weight: 600;
			text-align: center;
		}
		&-bg {
			font-size: 0;
			&-img {
				width: 100%;
			}
		}
		&-content {
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			&-sub {
				font-size: 36rpx;
				text-align: center;
				padding: 20rpx;
				letter-spacing: 10rpx;
				font-weight: bold;
				&-text {
					mix-blend-mode: difference;
					color: #ffffff;
				}
				// text-shadow: 
				// 	-1px -1px 0 red,  
				// 	 1px -1px 0 red,
				// 	-1px  1px 0 red,
				// 	 1px  1px 0 red; /* 四个方向的阴影 */
			}
			.product-seckill {
				margin-bottom: 20rpx;
			}
		}
	}
</style>
